@import "~@/assets/fonts/fonts.css";
$theme-color: null;
/* 颜色变量 */
$themes: (
  default_theme: (
    default_color: #F6DD0A,
    minor_color: #FFF8BD,
    deep_color: #E7C400,
    linear_color: #E41010,
    icon_checked: url('~@/assets/images/icon-checked.png'),
    //签到奖励背景
    sign_award_head: url('~@/assets/images/signIn/award-head.png'),
    sign_award_footer: url('~@/assets/images/signIn/award-footer.png'),
    //余额卡片
    balance_card_bg: linear-gradient(to bottom, #FFE925, #FFD800),
    balance_card_mask: url('~@/assets/images/wallet/wallet-mask.png') no-repeat center/cover,
    //招聘
    recruit_bg: url('~@/assets/images/wallet/recruit-img.png') no-repeat center/cover,
  ),
);
//遍历主题map
@mixin theme_each {
  @each $theme-name, $theme-map in $themes {
    $--color-primary: $theme-map;
    $theme-color: $theme-map !global;
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}

// 获取导出的主题色
@function get_export_color($name) {
  $theme-name: map-get($themes, $name);
  @return map-get($theme-name, 'default_color');
}

// 获取主题色
@function get_color($key) {
  @return map-get($theme-color, $key);
}

//获取背景颜色
@mixin background_color($alpha: 1, $color:'default_color') {
  @include theme_each {
    background-color: rgba(get_color($color),$alpha);
  }
}

//获取渐变背景颜色
@mixin background_linear($deg: 90deg, $min: 0%, $max: 100%) {
  @include theme_each {
    background: linear-gradient($deg, get_color('minor_color') $min, get_color('default_color') $max);
  }
}

//获取渐变背景图片和颜色
@mixin background_img_color($deg: 90deg, $min: 0%, $max: 100%, $url: '') {
  @include theme_each {
    background-image: url($url), linear-gradient($deg, get_color('minor_color') $min, get_color('default_color') $max);
  }
}

// 设置阴影
@mixin box_shadow($x, $y, $blur, $spread: 0, $box: inset) {
  @include theme_each {
    box-shadow: $x $y $blur $spread get_color('default_color') $box;
  }
}

//获取字体颜色
@mixin font_color($color:'default_color') {
  @include theme_each {
    color: get_color($color);
  }
}

//获取边框颜色
@mixin border_color($color: 'default_color') {
  @include theme_each {
    border-color: get_color($color);
  }
}

//设置宽高
@mixin wh($w, $h) {
  width: #{$w}px;
  height: #{$h}px;
}

//顶部背景图及颜色
@mixin header_bg($deg, $min, $max) {
  @include theme_each{
    background-image: get_color('header_bg'), linear-gradient($deg, get_color('minor_color') $min, get_color('default_color') $max);
    background-size: cover;
  }
}

//充值排行背景图
@mixin rec_ranking_bg() {
  @include theme_each{
    background: get_color('rec_ranking_bg') no-repeat center/cover;
  }
}

//价格
@mixin price($color:#000, $fz: 18, $pz: 12, $fw: '500') {
  position: relative;
  display: flex;
  align-items: baseline;
  line-height: normal;
  &::before {
    content: "￥";
    font-size: #{$pz}px;
    left: 0;
    bottom: 2px;
  }
  font-size: #{$fz}px;
  font-weight: #{$fw};
  color: #{$color};
  font-family: 'changchun1hao';
}

@mixin line-over($line: 1) {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: initial;
  word-break: normal;
  -webkit-line-clamp: #{$line};
  line-clamp: #{$line};
}

@mixin flex_center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex_between() {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin round($size) {
  width: #{$size}px;
  height: #{$size}px;
  border-radius: 100%;
  position: absolute;
}

@mixin model($position: 'absolute') {
  position: #{$position};
  background: rgba(0,0,0,0.6);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  opacity: 0;
  transition: all .2s;
  &.show {
    z-index: 101;
    opacity: 1;
  }
}

@mixin icon_check($size: 20) {
  width: #{$size}px;
  height: #{$size}px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-image: url("~@/assets/images/icon-check.png");
  cursor: pointer;
  transition: all .2s;
  &.checked {
    @include theme_each{
      background-image: get_color('icon_checked');
    }
  }
  &.disabled {
    cursor: not-allowed;
    opacity: .5;
  }
}

@mixin icon_plus_minus($size: 20, $radius: 4px) {
  width: #{$size}px;
  height: #{$size}px;
  text-align: center;
  line-height: #{$size}px;
  font-size: #{($size - 10)}px;
  @include background_color();
  color: #1A1A1A;
  border-radius: $radius;
  font-weight: bold;
  cursor: pointer;
  &.disabled {
    cursor: not-allowed;
    background: #F4F4F4;
    color: #D9D9D9;
  }
}

:export {
  violet_theme: get_export_color('default_theme');
}
